<template>
	<view class="container" v-if="goodsList.length && formData.length">
		<view class="goods-list">
			<view class="goods-item" v-for="(item, index) in goodsList" :key="index">
				<!-- 商品详情 -->
				<view class="goods-detail dis-flex flex-dir-row">
					<view class="left"><image class="goods-image" :src="item.image.file_path"></image></view>
					<view class="right dis-flex flex-box flex-dir-column flex-x-around">
						<text class="twolist-hidden">{{ item.goods_name }}</text>
						<text class="">￥{{ item.goods_price }}</text>
					</view>
				</view>

				<!-- 选择评价 -->
				<view class="score-row dis-flex flex-x-around">
					<view @tap="setScore" class="score-item score-praise dis-flex flex-y-center flex-x-center " :class="{ active: formData[index].score == 10 }" :data-index="index" data-score="10">
						<view class="score">
							<text class="score-icon suifont sui-haoping"></text>
							<text class="score-text">好评</text>
						</view>
					</view>
					<view @tap="setScore" class="score-item score-review dis-flex flex-y-center flex-x-center" :class="{ active: formData[index].score == 20 }" :data-index="index" data-score="20">
						<view class="score">
							<text class="score-icon suifont sui-zhongping"></text>
							<text class="score-text">中评</text>
						</view>
					</view>
					<view @tap="setScore" class="score-item score-negative dis-flex flex-y-center flex-x-center" :class="{ active: formData[index].score == 30 }" :data-index="index" data-score="30">
						<view class="score">
							<text class="score-icon suifont sui-chaping"></text>
							<text class="score-text">差评</text>
						</view>
					</view>
				</view>

				<!-- 评价内容 -->
				<view class="dis-flex content-row"><textarea v-model="formData[index].content" :data-index="index" maxlength="2000" placeholder="请输入评价内容 (留空则不评价)" placeholderStyle="color:#ccc"></textarea></view>

				<!-- 图片列表 -->
				<view class="image-list">
					<view class="image-preview" v-for="(imageItem, imageIndex) in formData[index].image_list" :key="imageIndex">
						<text class="image-delete suifont sui-shanchu" @tap="deleteImage" :data-index="index" :data-image-index="imageIndex"></text>
						<image mode="aspectFill" :src="imageItem.url"></image>
					</view>
					<view class="image-preview">
						<u-upload @on-remove="removePicture" :show-tips="false" :custom-btn="true" ref="uUpload" @on-uploaded="uploadAll" :header="uploadHeader" :name="keyName" :show-upload-list="false" :action="action" max-count="9" :index="index">
							<view slot="addBtn" class="image-picker dis-flex flex-dir-column flex-x-center flex-y-center">
								<text class="choose-icon suifont sui-tubiao_xiangji"></text>
								<text class="choose-text">上传图片</text>
							</view>

							<!-- <view  class="slot-btn" hover-class="slot-btn-hover" hover-stay-time="150"><u-icon name="photo" size="60" color="#c0c4cc"></u-icon></view> -->
						</u-upload>
					</view>
				</view>
			</view>
		</view>

		<view class="flow-fixed-footer b-f">
			<view class="flow-btn f-32"><view @tap="submit">确认提交</view></view>
		</view>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
import Url from '@/common/http/url.js';
export default {
	data() {
		return {
			// 页面参数
			options: null,

			// 待评价商品列表
			goodsList: [],

			// 表单数据
			formData: [],
			submitDisable: false,
			action: Url.UPLOAD_IMAGE,
			keyName: 'iFile'
		};
	},
	computed: {
		uploadHeader: function() {
			return {
				Authorization: this.userToken
			};
		}
	},
	onLoad(options) {
		// 记录页面参数
		this.options = options;

		// 获取待评价商品列表
		this.getGoodsList();
	},
	methods: {
		/**
		 * 获取待评价商品列表
		 */
		getGoodsList() {
			this.$u.api.getOrderCommentList(this.options.order_id).then(res => {
				let goodsList = res.data.goodsList;
				this.goodsList = goodsList;
				this.formData = this.initFormData(goodsList);
				this.$nextTick(function() {
					this.formData.map((item, index) => {
						this.$set(this.formData[index], 'image_list', this.$refs.uUpload[index].lists);
					});
				});
			});
		},
		/**
		 * 初始化form数据
		 */
		initFormData(goodsList) {
			let data = [];
			goodsList.forEach(item => {
				data.push({
					goods_id: item.goods_id,
					order_goods_id: item.order_goods_id,
					score: 10,
					content: '',
					image_list: null,
					uploaded: []
				});
			});
			return data;
		},
		/**
		 * 设置评分
		 */
		setScore(e) {
			let dataset = e.currentTarget.dataset;
			this.$set(this.formData[dataset.index], 'score', dataset.score);
		},
		/**
		 * 删除图片
		 */
		deleteImage(e) {
			let dataset = e.currentTarget.dataset;
			this.$refs.uUpload[dataset.index].deleteItem(dataset.imageIndex);
		},
		/**
		 * 表单提交
		 */
		submit() {
			let formData = this.formData;

			// 判断是否重复提交
			if (this.submitDisable === true) {
				return false;
			}
			// 表单提交按钮设为禁用 (防止重复提交)
			this.submitDisable = true;

			// form提交执行函数

			if (this.checkAllUploadComplete()) {
				this.$u.api
					.submitOrderCommentData(this.options.order_id, JSON.stringify(formData))
					.then(res => {
						Tools.showSuccess(res.msg, () => {
							this.navigateBack();
						});
					})
					.catch(e => {
						this.submitDisable = false;
					});
			} else {
				this.$u.toast('请等待上传成功');
			}
		},
		removePicture(i, lists, index) {
			this.formData[index].uploaded.splice(i, 1);
		},
		uploadAll(lists, index) {
			const uploaded = [];
			lists.forEach((item, i) => {
				if (item.response.code == 200) {
					uploaded[i] = item.response.data.file_id;
				}
			});
			this.$set(this.formData[index], 'uploaded', uploaded);
		},
		checkAllUploadComplete() {
			let flag = true;
			for (let data of this.formData) {
				if (data.image_list.length != data.uploaded.length) {
					flag = false;
					break;
				}
			}
			return flag;
		}
	}
};
</script>

<style lang="scss">
.goods-list {
	font-size: 28rpx;
	.goods-item {
		margin-bottom: 30rpx;
		border-bottom: 1rpx solid #e3e3e3;
		background: #fff;
		.goods-detail {
			padding: 24rpx 20rpx;
			.left {
				.goods-image {
					display: block;
					width: 150rpx;
					height: 150rpx;
				}
			}
			.right {
				padding-left: 20rpx;
			}
		}
		.score-row {
			padding: 24rpx 20rpx;
			.score-item {
				&.score-praise {
					color: #ff4544;
					.score-icon {
						background: #ff4544;
					}
				}
				&.score-review {
					color: #fcb500;
					.score-icon {
						background: #fcb500;
					}
				}
				&.score-negative {
					color: #9b9b9b;
					.score-icon {
						background: #9b9b9b;
					}
				}
				.score {
					padding: 10rpx 20rpx 10rpx 10rpx;
					border-radius: 30rpx;
					.score-icon {
						margin-right: 10rpx;
						padding: 10rpx;
						border-radius: 50%;
						font-size: 30rpx;
						color: #fff;
					}
				}
				&.active {
					.score {
						color: #fff;
					}
					&.score-praise {
						.score {
							background: #ff4544;
						}
					}
					&.score-review {
						.score {
							background: #fcb500;
						}
					}
					&.score-negative {
						.score {
							background: #9b9b9b;
						}
					}
				}
			}
		}
		.content-row {
			padding: 10rpx 20rpx;
			textarea {
				width: 100%;
				height: 220rpx;
				padding: 12rpx;
				border: 1rpx solid #e8e8e8;
				border-radius: 5rpx;
				box-sizing: border-box;
			}
		}
		.image-list {
			padding: 24rpx 20rpx;
			display: flex;
			flex-wrap: wrap;
			image {
				display: block;
				width: 150rpx;
				height: 150rpx;
			}
			.image-picker {
				width: 150rpx;
				height: 150rpx;
				border: 1rpx dashed #ccc;
				color: #ccc;
				.choose-icon {
					font-size: 56rpx;
					margin-bottom: 6rpx;
				}
				.choose-text {
					font-size: 22rpx;
				}
			}

			.image-preview {
				margin-right: 30rpx;
				margin-top: 30rpx;
				width: 150rpx;
				height: 150rpx;
				position: relative;
				&:nth-child(4n + 0) {
					margin-right: 0;
				}
				.image-delete {
					position: absolute;
					top: -15rpx;
					right: -15rpx;
					height: 42rpx;
					width: 42rpx;
					line-height: 42rpx;
					background: rgba(0, 0, 0, 0.64);
					border-radius: 50%;
					color: #fff;
					font-weight: bolder;
					font-size: 22rpx;
					z-index: 10;
					text-align: center;
				}
			}
		}
	}
}
</style>
